<!--  -->
<template>
	<publicPage>
		<view class="myPage">
			<view class="headBox" :style="headStyle">
				<!-- 未登录盒子 -->
				<button
					v-if="!isLogin"
					class="buttonStyleNone"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
				>
					<view class="disFlxAC">
						<view class="headImg">
							<u-icon name="account" color="#333333" size="40"></u-icon>
						</view>
						<view class="fz-18 fw-6"> 一键登录 </view>
					</view>
				</button>
				<!-- 登录后盒子 -->
				<view v-else>
					<view class="disFlxAC" @click="goPage('/pagesC/myInfo/index')">
						<view class="headImg">
							<image
								v-if="userInfo.headimg"
								:src="userInfo.headimg"
								mode="aspectFill"
								style="width: 100%; height: 100%"
							/>
							<u-icon v-else name="account" color="#FFFFFF" size="40"></u-icon>
						</view>
						<view>
							<view class="fz-18 fw-6 ov-1">{{ userInfo.userName || "请完善信息" }}</view>
							<!-- <view
                class="disFlxAC"
                style="flex-wrap: wrap"
                v-if="userInfo.tag"
              >
                <view
                  class="tag ov-2"
                  v-for="(item, index) in splitRetuen(userInfo.tag)"
                  :key="index"
                  >{{ item }}</view
                >
              </view> -->
						</view>
						<view v-if="userInfo.userTypes.includes(0)" class="toggleBox fz-12 colorZS disFlxAC shrink0" @click.stop="toggleShow = true">
							<image src="@/static/image/toggle.png" style="width: 36rpx" mode="widthFix" />
							<text class="pl-2">用户</text>
						</view>
					</view>
				</view>
			</view>

			<view class="bodyBox">
				<view class="walletBox">
					<view class="colorF">
						<text>钱包</text>
						<text>(云豆)</text>
					</view>
					<view class="py-15 fw-7 colorF">
						<text class="fz-31">{{ userInfo.balance || 0 }}</text>
						<!-- <text class="fz-21">.00</text> -->
					</view>
					<view class="disFlxAC disFlxRS">
						<view class="walletBtn disFlxAC" @click="loginGo('/pagesC/payDetails/index')">
							<text>明细</text>
							<u-icon name="arrow-right" size="14" color="#FFFFFF" />
						</view>
						<view class="walletBtn disFlxAC" @click="loginGo('/pagesC/recharge/index')">
							<text>充值</text>
							<u-icon name="arrow-right" size="14" color="#FFFFFF" />
						</view>
						<view class="walletBtn disFlxAC" @click="loginGo('/pagesC/withdraw/index')">
							<text>提现</text>
							<u-icon name="arrow-right" size="14" color="#FFFFFF" />
						</view>
					</view>
				</view>

				<view class="cellBox">
					<u-cell
						size="large"
						title="我的订单"
						isLink
						@click="loginGo('/pagesC/order/orderList')"
						:border="false"
					></u-cell>
					<view class="borderT mx-15" style="border-color: #ddd"></view>
					<u-cell
						size="large"
						title="我的报告"
						isLink
						@click="loginGo('/pagesC/order/reportList')"
						:border="false"
					></u-cell>
					<view class="borderT mx-15" style="border-color: #ddd"></view>
					<u-cell
						size="large"
						title="家庭成员管理"
						isLink
						@click="loginGo('/pagesC/family/familyList')"
						:border="false"
					></u-cell>
					<view class="borderT mx-15" style="border-color: #ddd"></view>
          <u-cell
						size="large"
						title="签约申请记录"
						isLink
						@click="loginGo('/pagesC/addFriend/addHistory')"
						:border="false"
					></u-cell>
					<view class="borderT mx-15" style="border-color: #ddd"></view>
					<u-cell
						size="large"
						title="关注公众号"
						isLink
						@click="accountShow = true"
						:border="false"
					>
						<view slot="value" class="color9">接收医生消息,通知</view>
					</u-cell>
					<view class="borderT mx-15" style="border-color: #ddd"></view>
					<u-cell
						size="large"
						title="设置"
						isLink
						@click="loginGo('/pagesC/set/index')"
						:border="false"
					></u-cell>
				</view>
			</view>
		</view>
		<OfficialAccount :show="accountShow" @close="accountShow = false" />
		<ToggeleId :show="toggleShow" @close="toggleShow = false" />
	</publicPage>
</template>

<script>
import { splitRetuen } from "@/utils/common.js";
import OfficialAccount from "@/components/officialAccount.vue";
import ToggeleId from "@/components/toggeleId";

export default {
	components: {
		OfficialAccount,
		ToggeleId,
	},
	computed: {
		// 头部样式
		headStyle() {
			return `padding-top: ${this.$store.state.deviceInfo.statusBarHeight + 35}px;`;
		}
	},
	data() {
		return {
			accountShow: false,
			toggleShow: false,
		};
	},
	onShow() {
		this.$store.dispatch("getUserInfo");
		console.log(this.userInfo, "用户信息");
	},
	onShareAppMessage() {},
	onShareTimeline() {},
	methods: {
		splitRetuen,
		// 立即登录
		getPhoneNumber(e) {
			this.$store.dispatch("getPhoneNumber", e);
		},
	},
};
</script>
<style lang="scss" scoped>
.myPage {
	.headBox {
		color: #333333;
		padding-bottom: 44rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
		.headImg {
			width: 128rpx;
			height: 128rpx;
			border: solid 2px #ffffff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			margin-right: 32rpx;
			flex-shrink: 0;
		}
		.tag {
			background-color: #ffffff;
			border-radius: 50rpx;
			line-height: 40rpx;
			color: #808080;
			font-size: 24rpx;
			padding: 0 18rpx;
			margin-top: 16rpx;
		}
		.tag + .tag {
			margin-left: 16rpx;
		}
	}
	.bodyBox {
		padding: 0 30rpx;
		position: relative;
		.walletBox {
			height: 288rpx;
      margin-bottom: 30rpx;
			background-image: url("https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/myBG.png");
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 20rpx;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.2);
			padding: 28rpx 24rpx 24rpx 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.disFlxRS {
				justify-content: flex-end;
			}
			.walletBtn {
				background: #6ad0d1;
				border-radius: 20rpx;
				border: 2rpx solid #6ad0d1;
				height: 52rpx;
				line-height: 48rpx;
				padding: 0 20rpx;
				color: #ffffff;
			}
			.walletBtn + .walletBtn {
				margin-left: 30rpx;
			}
		}
	}

	.cellBox {
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.toggleBox {
		border: solid 1px #2dbcbe;
		padding: 2rpx 20rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}
}
</style>
